<template>
  
        <div class="swiper-container swiper-cinema" id="banner">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in data" :key="item.filmId"><img :src="item.poster" alt=""></div>
    </div>
    </div>
   
</template>

<script>
import Swiper from 'swiper'
export default {
    data(){
        return{

        }
    },
    methods:{
    getbanner(){
      let _this = this
      var swiper = new Swiper('.swiper-cinema', {
      slidesPerView: 3,
      spaceBetween: 30,
	  centeredSlides: true,
    //  autoplay:true,
      slideToClickedSlide: true,
      on:{
        transitionEnd:function(){
         _this.$emit('selectIndex',this.activeIndex)
        }
      }
    })
    if(this.id){
    swiper.slideTo(Number(this.id), 1000, false)
    }
        }
    },
    mounted(){
        this.getbanner()
    },
    props:['data','id'],
    
}
</script>

<style lang="scss" scoped>
#banner{
    height:3.2rem;
    padding:0.3rem 0;
    box-sizing: border-box;
    img{
      width:1.8rem;
      height:2.6rem;
    }
}

 html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 3.2rem
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: 300ms;
	  transform: scale(0.8);
    img{
      width:100%;
      height:100%;
    }
    }
	.swiper-slide-active,.swiper-slide-duplicate-active{
      transform: scale(1);
	}

</style>